<template>
	<view class="u-font-24 u-flex u-row-between prices-box">
		<view class="u-flex">
			<prices-style :prices="item.prices"></prices-style> /{{item.unit}}
		</view>
		<view class="icon u-flex u-row-center" @click.stop="onClick($event)">
			<u-icon name="shopping-cart" color="#fff" size="28"></u-icon>
		</view>
		<u-image class='goods-icon' v-if='goCart' :style='iconStyle' width="50rpx" height="50rpx" :src="item.url"></u-image>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		computed: {
			iconStyle() {
				let style = {
					top: this.top,
					left: this.left,
					transition : this.transition
				}
				return style
			}
		},
		data() {
			return {
				goCart: false,
				top:null,
				left:null,
				transition:'left 0s, top 0s'
			};
		},
		mounted() {
			
		},
		methods: {
			onClick(e) {
				this.goCart = true
				const res = uni.getSystemInfoSync()
				this.top = e.detail.y + 'px'
				this.left = e.detail.x + 'px'
				this.transition = 'all 0s'
				this.$toast('添加购物车')
				setTimeout(()=>{
					this.top = '100vh'
					this.left = res.windowWidth/8*5+'px'
					this.transition = 'all .6s'
					uni.showTabBarRedDot({index:2})
				},200)
			}
		},

	}
</script>

<style scoped>
	.goods-icon {
		position: fixed;
		transition: left 1s linear, top 1s ease-in;
		z-index: 99;
	}

	.prices-box {
		width: 100%;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #0eb6ff;
		border-radius: 100%;
		padding: 5rpx;
	}
</style>
